<script setup lang="ts">
import { useRole } from "./utils/hook";
import ReCol from "@/components/ReCol";

defineOptions({
  name: "Question"
});

const {
  questionTypeRef,
  handleTypeChange,
  questionDataList,
  onPreQuestion,
  onNextQuestion,
  currentAnswerIdRef,
  currentAnswerRef,
  formExamData,
  showIdRef,
  showMumber
} = useRole();

function changeStyle(item, showId) {
  const index = questionDataList.value.indexOf(item);
  currentAnswerRef.value = index;
  showIdRef.value = showMumber(showId);
}
//去除富文本中的p标签
function delHtmlTag(str) {
  return str.replace(/<(\/)?p>/g, "");
}
</script>
<template>
  <el-card>
    <el-row :gutter="30" class="no-copy">
      <re-col :value="6" :xs="24" :sm="24">
        <el-card>
          <template #header>
            <el-radio-group
              v-model="questionTypeRef"
              @change="handleTypeChange"
            >
              <el-radio :label="0">判读题</el-radio>
              <el-radio :label="1">单选题 </el-radio>
              <el-radio :label="2">多选题 </el-radio>
              <el-radio :label="3">案例分析</el-radio>
            </el-radio-group>
          </template>
          <el-space
            style="padding-bottom: 8px"
            v-for="(item, index) in questionDataList"
            :key="index"
          >
            <el-button
              :type="
                currentAnswerIdRef == item.id
                  ? 'danger'
                  : 'answer' in item
                  ? 'info'
                  : ''
              "
              @click="changeStyle(item, index)"
              style="line-height: 1.5"
            >
              {{ showMumber(index) }}
            </el-button>
          </el-space>
        </el-card>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-card>
          <template #header>
            <div class="w-full flex justify-between">
              <el-button type="info" size="large" @click="onPreQuestion"
                >上一题</el-button
              >
              <el-button type="info" size="large" @click="onNextQuestion"
                >下一题</el-button
              >
            </div>
          </template>
          <div style="height: 65vh; overflow-x: hidden; overflow-y: auto">
            <el-form :model="formExamData">
              <el-form-item
                style="font-weight: bold"
                v-if="formExamData.type == 0"
                >(判断题)**<span
                  >第{{ showIdRef }}题({{ formExamData.score }}分)：</span
                ></el-form-item
              >
              <el-form-item
                style="font-weight: bold"
                v-if="formExamData.type == 1"
                >(单选题)**<span
                  >第{{ showIdRef }}题({{ formExamData.score }}分)：</span
                ></el-form-item
              >
              <el-form-item
                style="font-weight: bold"
                v-if="formExamData.type == 2"
                >(多选题)**<span
                  >第{{ showIdRef }}题({{ formExamData.score }}分)：</span
                ></el-form-item
              >
              <el-form-item
                style="font-weight: bold"
                v-if="formExamData.type == 3"
                >(案例分析)**<span
                  >第{{ showIdRef }}题({{ formExamData.score }}分)：</span
                ></el-form-item
              >
              <el-form-item>
                <span v-html="formExamData.title" />
              </el-form-item>
              <el-form-item v-if="formExamData.childTitle">
                <span>（{{ formExamData.childIndex }}）</span>
                <span v-html="formExamData.childTitle" />
              </el-form-item>
              <el-form-item>
                <el-radio-group
                  v-model="formExamData.answer"
                  :disabled="true"
                  v-if="formExamData.type == 0 || formExamData.childType == 0"
                >
                  <el-radio :label="1">正确</el-radio>
                  <el-radio :label="0">错误</el-radio>
                </el-radio-group>
                <el-radio-group
                  v-model="formExamData.answer"
                  :disabled="true"
                  v-if="formExamData.type == 1 || formExamData.childType == 1"
                >
                  <el-row :gutter="30">
                    <re-col
                      :value="24"
                      :xs="24"
                      :sm="24"
                      class="el-col-padding"
                      v-for="(item, index) in formExamData.choiceList"
                      :key="index"
                    >
                      <el-radio :label="item.name"
                        >{{ item.name }}、<span
                          v-html="delHtmlTag(item.content)"
                        />
                      </el-radio>
                    </re-col>
                  </el-row>
                </el-radio-group>
                <el-checkbox-group
                  v-model="formExamData.answer"
                  :disabled="true"
                  v-if="formExamData.type == 2 || formExamData.childType == 2"
                >
                  <el-row :gutter="30">
                    <re-col
                      :value="24"
                      :xs="24"
                      :sm="24"
                      class="el-col-padding"
                      v-for="(item, index) in formExamData.choiceList"
                      :key="index"
                    >
                      <el-checkbox :label="item.name"
                        >{{ item.name }}、<span
                          v-html="delHtmlTag(item.content)"
                      /></el-checkbox>
                    </re-col>
                  </el-row>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </re-col>
      <re-col :value="6" :xs="24" :sm="24">
        <el-card>
          <template #header>
            <div class="flex flex-row justify-start">题目解析</div>
          </template>
          <div
            class="w-full flex justify-center"
            v-if="formExamData.questionStr"
          >
            <h2 style="color: green">
              正确答案：
              <span v-if="formExamData.questionStr == 0">错误</span>
              <span v-if="formExamData.questionStr == 1">正确</span>
              <span
                v-if="
                  formExamData.questionStr != 0 && formExamData.questionStr != 1
                "
              >
                {{ formExamData.questionStr }}
              </span>
            </h2>
          </div>
          <div class="w-full flex justify-center" v-if="formExamData.times > 0">
            <h2 style="color: red">错误次数：{{ formExamData.times }}次</h2>
          </div>
          <div>{{ formExamData.description }}</div>
        </el-card>
      </re-col>
    </el-row>
  </el-card>
</template>
<style scoped lang="scss">
:deep(.el-radio__input.is-disabled + .el-radio__label) {
  color: #5a5a5a !important;
}

:deep(.el-radio__input.is-disabled.is-checked + .el-radio__label) {
  color: #fd430a !important;
}

:deep(.el-radio__input.is-disabled.is-checked .el-radio__inner) {
  background-color: #fd430a !important;
  border-color: #fd430a !important;
}

:deep(.el-checkbox__input.is-disabled + .el-checkbox__label) {
  color: #5a5a5a !important;
}

:deep(.el-checkbox__input.is-disabled.is-checked + .el-checkbox__label) {
  color: #fd430a !important;
}

:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner) {
  background-color: #fd430a !important;
  border-color: #fd430a !important;
}

:deep(.el-radio__label) {
  width: 100% !important;
  line-height: 18px;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: normal;
}

:deep(.el-checkbox__label) {
  display: inline-block;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: normal;
  vertical-align: middle;
}

.el-col-padding {
  padding-bottom: 20px;
}
</style>
